<template>
    <div>
        <div class="content" v-if="language == 'EN'">
            <div class="title">
        <p class="title_word">Products and services</p>
      
      </div>
            <p class="desc"></p>
            <div class="img_container">
                <div class="inner_container">
                    <div class="round"><img class="inner_img" src="../static/images/Frame(7)@2x.png" alt=""></div>
                    <div class="desc_container">
                        <p class="desc_title">Electronic Components</p>
                        <p class="desc_content">We offer a wide variety of electronic components, including but not limited to chips, diodes, capacitors, resistors, sensors, connectors and more. By establishing long-term relationships with leading global suppliers, we are able to provide the latest and highest quality products and ensure that our customers have access to the components they need</p>
                    </div>

                </div>
                <div class="inner_container inner_container_center">
                    <div class="round"><img class="inner_img" src="../static/images/Frame(8)@2x.png" alt=""></div>
                    <div class="desc_container">
                        <p class="desc_title">Cost Reducing Wire Cards</p>
                        <p class="desc_content"> We offer wire card solutions for the electronics manufacturing industry, designed to help our customers reduce production costs and improve productivity and quality. We provide our customers with sustainable cost advantages by optimizing the supply chain, streamlining production processes and providing customized solutions.</p>
                    </div>
                </div>
                <div class="inner_container">
                    <div class="round"><img class="inner_img" src="../static/images/Frame(9)@2x.png" alt=""></div>
                    <div class="desc_container">
                        <p class="desc_title">Inventory management</p>
                        <p class="desc_content"> We provide professional inventory management services to help our clients effectively manage inventory, reduce inventory costs and minimize inventory risk. Through sophisticated inventory forecasting, customized inventory management solutions and flexible supply chain management, we ensure that our clients are able to rationalize and optimize their inventories.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="content" v-else>
            <div class="title">
                <p class="title_word">产品和服务</p>
                <p class="title_line" :class="language == 'EN' ? '' : 'title_line_cn'"></p>
            </div>
            <p class="desc"></p>
            <div class="img_container">
                <div class="inner_container">
                    <div class="round"><img class="inner_img" src="../static/images/Frame(7)@2x.png" alt=""></div>
                    <div class="desc_container">
                        <p class="desc_title">电子元器件供应</p>
                        <p class="desc_content">我们提供各类电子元器件，包括但不限于芯片、二极管、电容、电阻、传感器、连接器等。通过与全球领先的供应商建立长期合作关系，我们能够提供最新、最优质的产品，并确保客户能够获得所需的元器件</p>
                    </div>

                </div>
                <div class="inner_container inner_container_center">
                    <div class="round"><img class="inner_img" src="../static/images/Frame(8)@2x.png" alt=""></div>
                    <div class="desc_container">
                        <p class="desc_title">降低成本的线卡</p>
                        <p class="desc_content">我们提供针对电子制造行业的线卡方案，旨在帮助客户降低生产成本、提高生产效率和质量。我们通过优化供应链、精简生产流程以及提供定制化的解决方案，为客户提供可持续的成本优势</p>
                    </div>
                </div>
                <div class="inner_container">
                    <div class="round"><img class="inner_img" src="../static/images/Frame(9)@2x.png" alt=""></div>
                    <div class="desc_container">
                        <p class="desc_title">库存管理</p>
                        <p class="desc_content"> 我们提供专业的库存管理服务，帮助客户有效管理库存，降低库存成本并最大程度地减少库存风险。通过精密的库存预测、定制化的库存管理方案以及灵活的供应链管理，我们确保客户能够实现库存的合理化和优化</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
// import { mapState } from "vuex";

export default {
    props: {
        language: {
            type: String,
            default: 'EN'
        }
    }
};
</script>

<style lang="scss" scoped>
.content {
    width: 100%;
    height: 821px;
    background-image: url('../static/images/shangwuhezuo.jpg');
    background-size: 100%;
    margin-top: 75px;
    // margin-bottom: 169px;

    .title {
        width: 460px;
        height: 40px;
        font-family: Poppins;
        font-weight: 700;
        color: #ffffff;
        font-size: 40px;
        text-align: center;
        width: 100%;
        padding-top: 40px;
        box-sizing: border-box;
    }

    .desc {
        width: 1200px;
        height: 32px;
        font-family: Poppins;
        color: #ffffff;
        font-size: 18px;
        text-align: center;
        width: 100%;
        margin-top: 60px;
    }

    .img_container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 53px;

        .inner_container {
            width: 385px;
            height: 523px;
            background: #ffffff;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            padding: 34px;

            .round {
                width: 193px;
                height: 193px;
                background: #d9ecfe;
                border-radius: 50%;
                overflow: hidden;
                position: relative;

                .inner_img {
                    width: 100.99px;
                    height: 91.66px;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }
            }

            .desc_container {
                .desc_title {
                    font-family: PingFang SC;
                    font-weight: 600;
                    color: #222222;
                    font-size: 22px;
                    text-align: center;
                }

                .desc_content {
                    font-family: PingFang SC;
                    color: #666666;
                    font-size: 14px;
                    text-align: left;
                    height: 200px;
                }
            }



        }

        .inner_container_center {
            margin-left: 22px;
            margin-right: 22px;
        }
    }
}
</style>